<template>
    <el-aside class="nav-menu" style="width:170px;height:100%">
            <el-menu :default-active="active" class="el-menu-vertical-demo" @select="onSelectMenu" background-color="#545c64" text-color="#fff">
                <el-menu-item index="Home">
                    <!-- <i class="el-icon-menu"></i> -->
                    <template #title>首页</template>
                </el-menu-item>
                <el-menu-item index="Live">
                    <template #title>直播管理</template>
                </el-menu-item>
                <el-menu-item index="OnDemand">
                    <template #title>点播管理</template>
                </el-menu-item>
                <el-menu-item index="Manufacturer">
                    <template #title>厂商管理</template>
                </el-menu-item>
                <el-menu-item index="User">
                    <template #title>用户管理</template>
                </el-menu-item>
            </el-menu>
    </el-aside>
</template>

<script lang="ts">
import { defineComponent,getCurrentInstance, watch, ref } from 'vue';

export default defineComponent({
    setup(){
        const instance: any = getCurrentInstance();
        const GL = instance.appContext.config.globalProperties;
        const active = ref(GL.$route.meta.menu)
        watch(
            () => GL.$route,
            (to) => {
                active.value = GL.$route.meta.menu;
            }
        );
        const onSelectMenu = (name: string) =>{
            GL.$router.push({name})
        }
        return{
            active,
            onSelectMenu
        }  
    }
});
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
